<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>用户统计</title>
		<script src="js/echarts.min.js"></script>
		<script src="lib/layui/jquery-1.8.3.min.js"></script>
	</head>
	<body style="height: 100%; margin: 0">
		<div style="margin: 50px 1px;"></div>
		<div id="sum">用户总数：</div>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 100%;height:400px;"></div>


		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;
			$.get("http://localhost:8888/usedcar/ECharts/userSum?token="+document.cookie.split(";")[0], function(response) {
				console.log(response);
				$("#sum").append(response);
			});
			//获取用户信息
			$.get("http://localhost:8888/usedcar/ECharts/user?token="+document.cookie.split(";")[0], function(response) {
				//会把json数据转成数组
				console.log(response);



				option = {
					title: {
						text: '用户占比统计',
						subtext: '最新数据',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [{
						name: '用户类型',
						type: 'pie',
						radius: '60%',
						data: response,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 20,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal: {
								label: {
									show: true,
									formatter: '{b} : {c} ({d}%)'
								},
								labelLine: {
									show: true
								}
							}
						}
					}]
				};
				option && myChart.setOption(option);
			});
		</script>
	</body>
</html>
